<script setup>
import {ref} from "vue";
import axios from "axios";
//要使用ref将数组抱起来才能被vue管理
const infoList = ref([])
//用来控制弹窗是否出现
const infoShow = ref(false);
const infoForm = ref({})

const remove = (id) => {
  axios.post('/domitory/remove',{id: id})
  //真实环境中，这里应该是将id发生到后端的服务中，从数据库中删除数据
  //filter函数中，如果为true,留下，如果为false，删除，我们的判断条件是不等于接受的id
  //filter函数返回一个新的数组，我们将新的数组赋给infoList
  infoList.value = infoList.value.filter(item => item.id !== id)
}
//新增框消失
const openInfo = () => {
  infoForm.value = {};
  infoShow.value = true;
}

const editInfo = (id) =>{
  //从数组中找到id等于接受的id的数据
  const info = infoList.value.find(item => item.id === id);
  //将选中行的数据填充到表单中
  infoForm.value = {...info};
  //显示弹窗
  infoShow.value = true;
}
const save = () => {
  if (infoForm.value.id){
    //编辑
    const index =infoList.value.findIndex(item => item.id === infoForm.value.id);
    if (index !== -1){
      infoList.value[index] = {...infoForm.value}
    }
  }else {
    //新增
    //模拟保存数据,从infoForm中获取数据复制给新的数组中
    const info ={...infoForm.value};
    info.id = new Date().getTime();
    infoList.value.push(info);
  }

  infoShow.value = false;
}
</script>

<template>
  <div>
    <el-button type="primary" @click="openInfo" style="margin: 10px">添加</el-button>
  </div>

  <el-table :data="infoList" border style="width: 100%">
    <el-table-column prop="name" label="名称" min-width="180" />
    <el-table-column prop="size" label="床铺数量" min-width="180"  />
    <el-table-column prop="gender" label="性别" min-width="180"  />
    <el-table-column prop="floor" label="楼层"  min-width="280"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" icon="Edit" @click="editInfo(scope.row.id)"></el-button>
        <el-button size="small" type="danger" icon="Delete" @click="remove(scope.row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>
    <el-dialog v-model="infoShow" title="详情" width="500">
      <el-form :model="infoForm">
        <el-form-item label="名称" :label-width="100">
          <el-input v-model="infoForm.name"  placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="床铺数量" :label-width="100" >
          <el-input v-model="infoForm.size"  type="number" placeholder="请输入床铺数量"/>
        </el-form-item>
        <el-form-item label="性别" :label-width="100">
          <el-select v-model="infoForm.gender" placeholder="请选择性别" style="width: 240px">
            <el-option label="男" value="Male"/>
            <el-option label="女" value="Female"/>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层" :label-width="100">
          <el-input v-model="infoForm.floor" type="number" placeholder="请输入楼层"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="infoShow = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped>

</style>